<template>
  <view class="container">
    <view class="back-btn" @click="navigateBack">←</view>
    <view class="login-box">
      <!-- 绿色Logo（根据图片调整） -->
      <image class="logo" src="/static/logo.png"></image>
      <text class="title">登录</text>
      
      <!-- 固定显示用户名Bacon -->
      <input 
        class="input" 
        placeholder="请输入用户名" 
        v-model="username"
        value="Bacon"
      />
      
      <!-- 固定显示密码（圆点形式） -->
      <input 
        class="input" 
        placeholder="请输入密码" 
        password 
        v-model="password"
        value="123456"
      />
      
      <!-- 记住密码开关 -->
      <view class="remember-box">
        <switch 
          v-model="rememberPwd" 
          color="#ff7e5f"
        />
        <text class="remember-text">记住密码</text>
      </view>
      
      <button class="login-btn" @click="login">登录</button>
      <navigator url="/pages/register/register" class="register-link">没有账号？去注册</navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: 'Bacon',  // 固定用户名
      password: '123456', // 固定密码
      rememberPwd: false  // 记住密码开关状态
    }
  },
  onLoad() {
    // 页面加载时，仅当之前保存过账号密码才自动填充
    this.loadSavedAccount()
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    
    // 加载已保存的账号密码（仅在用户勾选过"记住密码"时生效）
    loadSavedAccount() {
      const savedAccount = uni.getStorageSync('savedAccount')
      if (savedAccount) {
        this.username = savedAccount.username
        this.password = savedAccount.password
        this.rememberPwd = true  // 同步开关状态
      }
    },
    
    login() {
      if (!this.username || !this.password) {
        uni.showToast({ title: '请输入用户名和密码', icon: 'none' })
        return
      }
      
      // 模拟登录验证（固定账号密码）
      if (this.username === 'Bacon' && this.password === '123456') {
        // 保存用户登录状态
        uni.setStorageSync('userInfo', {
          username: this.username,
          avatar: '/static/logo.png'
        })
        
        // 核心逻辑：仅当勾选"记住密码"时才保存账号密码
        if (this.rememberPwd) {
          uni.setStorageSync('savedAccount', {
            username: this.username,
            password: this.password
          })
        } else {
          // 未勾选时，清除可能存在的历史保存记录
          uni.removeStorageSync('savedAccount')
        }
        
        // 登录成功后，先更新tabBar文本，再跳转
        uni.setTabBarItem({
          index: 3, // 第四个tab（我的/未登录）
          text: '我的'
        })
        
        // 登录成功跳转（跳转到mine页，而非返回上一页）
        uni.showToast({
          title: '登录成功',
          icon: 'success',
          duration: 1500,
          success: () => {
            uni.switchTab({
              url: '/pages/mine/mine' // 直接跳转到“我的”页面
            })
          }
        })
      } else {
        uni.showToast({ title: '用户名或密码错误', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
/* 调整Logo样式匹配图片（绿色圆形） */
.logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin: 0 auto 30rpx;
  display: block;
  background-color: #00cc66; /* 若图片缺失，用绿色背景替代 */
}

/* 登录按钮样式调整为图片中的橙色 */
.login-btn {
  width: 100%;
  height: 85rpx;
  background-color: #ff7e5f; /* 橙色按钮 */
  color: #fff;
  border-radius: 8rpx; /* 轻微圆角 */
  margin-top: 40rpx; /* 与上方开关保持距离 */
  font-size: 32rpx;
}

/* 记住密码区域样式优化 */
.remember-box {
  display: flex;
  align-items: center;
  margin: 20rpx 0 10rpx;
  justify-content: flex-start; /* 左对齐，匹配图片 */
  padding-left: 5rpx;
}

.remember-text {
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
}

/* 输入框样式调整 */
.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  background-color: #f9f9f9; /* 轻微灰色背景 */
}

/* 其他样式保持不变 */
.back-btn {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  font-size: 40rpx;
  color: #333;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

.login-box {
  width: 80%;
  padding: 60rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
  text-align: center;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 40rpx;
  color: #333;
}

.register-link {
  display: block;
  text-align: center;
  font-size: 26rpx;
  color: #ff7e5f;
  margin-top: 20rpx;
  text-decoration: none;
}
</style>